<template>
  <div>
    <div>
      <button @click="handleStartDraw">Start</button>
      <button @click="handleStopDraw">Stop</button>
    </div>
    <div>
      {{ word }}
      {{ wordTone }}
    </div>
  </div>
</template>

<script>
import cnchar from 'cnchar'
import draw from 'cnchar-draw'
import voice from 'cnchar-voice'

export default {
  name: 'TestCnChar',
  data() {
    return {
      word: '爱',
      wordTone: '',
      isStop: true,
      writer: '',
      start: false,
    }
  },
  created() {
    this.load()
  },
  mounted() {

  },
  methods: {
    load() {
      // 显示拼音
      this.wordTone = cnchar.spell(this.word, "tone", 'first', 'low')
      draw(this.word, {
        el: this.draw,
        type: cnchar.draw.TYPE.STROKE
      })
    },
    handleStartDraw() {
      this.writer = draw(this.word, {
        type: cnchar.draw.TYPE.ANIMATION,
        style: {
          strokeColor: '#1D74E7', // 绘制每个笔划的颜色
        },
        animation: {
          loopAnimate: false,
          strokeAnimationSpeed: 4,     // 绘制每个笔划的速度
          delayBetweenStrokes: 1000,  // 数值, 默认 1000。 动画进行中每个笔画之间的间隔时间（以毫秒为单位）。
          delayBetweenLoops: 2000  // 数值, 默认 2000。 循环动画时每个动画循环之间的时间（以毫秒为单位）
        }
      })

      this.isStop = false
      this.writer.startAnimation();

      cnchar.voice.speak(this.word, {
        volume: 1,  // 0-1 音量
        rate: 0.3,     // 0.1-10 语速
        pitch:1     // 0-1 音高
      });
      cnchar.voice.regonize();
    },
    handleStopDraw() {
      if (!this.isStop) {
        this.isStop = true
        this.writer.startAnimation();
      } else {
        this.isStop = false
        this.writer.resumeAnimation();
      }
    },
    test() {
      var spell1 = cnchar.spell("你好", "array", "tone", "poly"); // 数组分割、带音调、候选多音字
      var spell2 = cnchar.spell('汉字拼音', 'first', 'low'); // 首字母小写
      var spell3 = cnchar.spell('長城'); // 支持繁体字（依赖cnchar-trad库）
      var spell4 = cnchar.spell('長城', 'simple'); // 禁用繁体字拼音
      var spell5 = "你好".spell(); // string prototype 调用
      console.log(spell1);
      console.log(spell2);
      console.log(spell3);
      console.log(spell4);
      console.log(spell5);
      console.log('test')
      console.log('汉字'.spell())
      // console.log(draw('你好'))


      var stroke1 = cnchar.stroke('汉字笔划', 'array'); // 数组分割
      var stroke2 = cnchar.stroke("你好", "order", "name"); // 数组分割、启用笔划（依赖cnchar-order库）
      var stroke3 = cnchar.stroke('長城', 'array'); // 支持繁体字（依赖cnchar-trad库）
      var stroke4 = cnchar.stroke('長城', 'simple', 'array'); // 禁用繁体字笔划数
      var stroke5 = "你好".stroke(); // string prototype 调用
      console.log(stroke1);
      console.log(stroke2);
      console.log(stroke3);
      console.log(stroke4);
      console.log(stroke5);

      draw('你好')
      draw('你好', {
        el: this.draw,
        type: cnchar.draw.TYPE.STROKE
      })
      draw('你好', {
        type: cnchar.draw.TYPE.ANIMATION,
        style: {
          strokeColor: '#1D74E7', // 绘制每个笔划的颜色
        },
        animation: {
          loopAnimate: true,
          strokeAnimationSpeed: 4,     // 绘制每个笔划的速度
          delayBetweenStrokes: 1000,  // 数值, 默认 1000。 动画进行中每个笔画之间的间隔时间（以毫秒为单位）。
          delayBetweenLoops: 2000  // 数值, 默认 2000。 循环动画时每个动画循环之间的时间（以毫秒为单位）
        }
      })

      voice('你好');
      window.addEventListener('click', () => {
        cnchar.voice.speak('你好');
        cnchar.voice.regonize();
      });
    }
  }
}
</script>

<style scoped>
</style>
